<template>
	<custom-page title="订单详情" backgroundColor="#F9F9F9">
		<template #content>
			<view class="page-content">
				<view class="time-layout" v-if="false">待接单剩余时间：24:32:12</view>
				<view class="time-layout" v-if="orderDetailInfo.orderStatus==5">等待管理员处理</view>
				<view class="bg-layout">
					<view class="store">{{orderDetailInfo.pollName}}</view>
					<view class="content">服务开始时间：{{orderDetailInfo.serviceStartTime}}</view>
					<view class="content">服务结束时间：{{orderDetailInfo.serviceEndTime}}</view>
					<view class="content">下单用户：{{orderDetailInfo.placeUserName}}</view>
					<view class="content">订单金额：￥{{orderDetailInfo.totalPaymentStr}}</view>
					<view style="height: 32rpx;"></view>
				</view>
				<view style="height: 16rpx;"></view>
				<view class="bg-layout">
					<view class="item-row-divider">
						<view>订单编号</view>
						<view>{{orderDetailInfo.orderNo}}</view>
					</view>
					<view class="item-row-divider">
						<view>下单时间</view>
						<view>{{orderDetailInfo.createTime}}</view>
					</view>
					
					<view class="item-row-divider" v-if="orderDetailInfo.receivingOrderTime">
						<view>接单时间</view>
						<view>{{orderDetailInfo.receivingOrderTime}}</view>
					</view>
					<view class="item-row-divider" v-if="orderDetailInfo.pollRoomNumber">
						<view>台球桌号</view>
						<view>{{orderDetailInfo.pollRoomNumber}}</view>
					</view>
					
					<view class="item-row-divider" v-if="orderDetailInfo.practicalServiceStartTime">
						<view>服务开始</view>
						<view>{{orderDetailInfo.practicalServiceStartTime}}</view>
					</view>
					<view class="flex-wrap-row" v-if="orderDetailInfo.serverStartPictureUrl">
						<image class="image-info" :src="item" mode="aspectFill" v-for="(item, index) in getServiceImage(orderDetailInfo.serverStartPictureUrl)" 
						@click="imagePreviewClick(getServiceImage(orderDetailInfo.serverStartPictureUrl), index)"></image>
					</view>
					
					<view class="item-row-divider" v-if="orderDetailInfo.practicalServiceEndTime">
						<view>服务结束</view>
						<view>{{orderDetailInfo.practicalServiceEndTime}}</view>
					</view>
					<view class="flex-wrap-row" v-if="orderDetailInfo.serverStopPictureUrl">
						<image class="image-info" :src="item" mode="aspectFill" v-for="(item, index) in 
						getServiceImage(orderDetailInfo.serverStopPictureUrl)" @click="imagePreviewClick(getServiceImage(orderDetailInfo.serverStopPictureUrl), index)"></image>
					</view>
					
					<view class="item-row">
						<view>订单状态</view>
						<view>{{orderDetailInfo.orderStatusDesc}}</view>
					</view>
				</view>
				<view style="height: 16rpx;"></view>
				<view class="bg-layout">
					<view class="item-row">
						<view>支付金额</view>
						<view class="money">¥{{orderDetailInfo.actualPaymentStr}}</view>
					</view>
					<view class="divider"></view>
					<view class="item-row">
						<view>支付方式</view>
						<view>微信支付</view>
					</view>
					<view class="divider"></view>
					<view class="item-row">
						<view>支付时间</view>
						<view>{{orderDetailInfo.paymentTime}}</view>
					</view>
				</view>
				<contact-service btnType="1"></contact-service>
				<view style="height: 32rpx;"></view>
			</view>	
		</template>
		<template #foot>
			<view class="bottom-row">
				<view class="btn1" @click.stop="refuseOrderClick(orderDetailInfo)" v-if="orderDetailInfo.orderStatus==2">拒绝接单</view>
				<view class="btn2" @click.stop="receiveOrderClick(orderDetailInfo)" v-if="orderDetailInfo.orderStatus==2">确认接单</view>
				<view class="btn2" @click.stop="startServiceClick(orderDetailInfo)" v-if="orderDetailInfo.orderStatus==3">开始服务</view>
				<view class="btn2" @click.stop="endServiceClick(orderDetailInfo)" v-if="orderDetailInfo.orderStatus==4">结束服务</view>
				<view class="btn1" @click.stop="abnormalClick(orderDetailInfo)" v-if="orderDetailInfo.orderStatus==3 || orderDetailInfo.orderStatus==4">异常上报</view>
				<view class="btn1" @click.stop="abnormalRecordClick(orderDetailInfo)">上报记录</view>
			</view>
		</template>
		<template #popup>
			<uni-popup ref="refuseDialog" type="dialog">
				<uni-popup-dialog ref="inputClose" mode="input" title="请输入拒单理由" placeholder="请输入"
					@confirm="refuseInputConfirm"></uni-popup-dialog>
			</uni-popup>
			<assistant-receive-popup ref="receivePopup" @inputBack="inputBack"></assistant-receive-popup>
		</template>
	</custom-page>
</template>

<script>
	export default {
		computed: {
			getServiceImage(){
				return (imageStr)=> {
					if(imageStr){
						return imageStr.split(',')
					}else{
						return []
					}
				}
			}
		},
		data() {
			return {
				orderId: '',
				orderDetailInfo: {},
				receiveOrderNo: '',
				refuseOrderNo:'',
			}
		},
		onLoad(val) {
			this.orderId = val.id
			this.getOrderDetail()
			
			//用户信息编辑
			uni.$on('refreshOrder', this.getOrderDetail)
		},
		methods: {
			//订单详情
			getOrderDetail(){
				this.requestCenter.getOrderDetail(this.orderId).then(res => {
					this.orderDetailInfo = res
				})
			},
			
			//拒绝接单
			refuseOrderClick(item) {
				this.refuseOrderNo = item.orderNo
				this.$refs.refuseDialog.open()
			},
			
			//拒绝接单确定
			refuseInputConfirm(val) {
				if(!val){
					uni.showToast({
						title: "请输入拒单理由"
					})
					return
				}
				let params = {
					orderNo: this.refuseOrderNo,
					presentationCondition: val
				}
				this.requestCenter.refuseOrder(params).then(res => {
					this.detailBack()
				})
			},
			
			//确认接单
			receiveOrderClick(item) {
				this.receiveOrderNo = item.orderNo
				this.$refs.receivePopup.show()
			},
			
			//接单输入
			inputBack(data){
				let params = {
					orderNo: this.receiveOrderNo,
					roomNumber: data.data
				}
				this.requestCenter.receiveOrder(params).then(res => {
					this.detailBack()
				})
			},
			
			//开始服务
			startServiceClick(item){
				uni.navigateTo({
					url: '/pages/assistant-start-service/assistant-start-service?type=start&orderNo=' + item.orderNo
				})
				// uni.showModal({
				// 	title: '确定开始服务吗？',
				// 	success: (modal) => {
				// 		if (modal.confirm) {
				// 			let params = {
				// 				orderNo: item.orderNo,
				// 			}
				// 			this.requestCenter.startServiceClick(params).then(res => {
				// 				this.detailBack()
				// 			})
				// 		}
				// 	}
				// })
			},
			
			//结束服务
			endServiceClick(item){
				uni.navigateTo({
					url: '/pages/assistant-start-service/assistant-start-service?type=end&orderNo=' + item.orderNo
				})
				// uni.showModal({
				// 	title: '确定结束服务吗？',
				// 	success: (modal) => {
				// 		if (modal.confirm) {
				// 			let params = {
				// 				orderNo: item.orderNo,
				// 			}
				// 			this.requestCenter.endOrderService(params).then(res => {
				// 				this.detailBack()
				// 			})
				// 		}
				// 	}
				// })
			},
			
			detailBack(){
				uni.showToast({
					title: "成功!",
					duration: 500,
					complete: () => {
						const eventChannel = this.getOpenerEventChannel();
						eventChannel.emit('orderBack')
						uni.navigateBack()
					}
				})
			},
			
			//异常上报
			abnormalClick(item) {
				uni.navigateTo({
					url: `/pages/order-abnormal-report/order-abnormal-report?orderNo=${item.orderNo}&userType=2`
				})
			},
			
			//上报记录
			abnormalRecordClick(item){
				uni.navigateTo({
					url: `/pages/order-report-record/order-report-record?orderNo=${item.orderNo}`
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page-content{
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	.time-layout{
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		font-size: 28rpx;
		color: #01CBFF;
		background-color: #ECF7F9;
	}
	.bg-layout{
		display: flex;
		flex-direction: column;
		padding: 0 32rpx;
		box-sizing: border-box;
		background-color: white;
	}
	.store{
		font-size: 32rpx;
		color: #021624;
		line-height: 44rpx;
		margin-top: 32rpx;
		font-weight: 500;
	}
	.content{
		font-size: 28rpx;
		color: #021624;
		line-height: 40rpx;
		margin-top: 8rpx;
	}
	.money{
		color: #ED3C3D !important;
	}
	.item-row,
	.item-row-divider{
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 88rpx;
		font-size: 28rpx;
		justify-content: space-between;
		:first-child{
			color: #585F70;
		}
		:last-child{
			color: #021624;
		}
	}
	.item-row-divider{
		border-bottom: solid 1rpx #F5F5F5;
	}
	.divider{
		width: 100%;
		height: 1rpx;
		background-color: #F5F5F5;
	}
	.flex-wrap-row{
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-top: 20rpx;
		padding-bottom: 20rpx;
		box-sizing: border-box;
		border-bottom: solid 1rpx #F5F5F5;
		.image-info{
			width: 336rpx;
			height: 200rpx;
			border-radius: 16rpx;
		}
	}
	.bottom-row{
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		padding: 18rpx 24rpx;
		box-sizing: border-box;
		background-color: white;
		flex-wrap: wrap;
		.btn1,
		.btn2{
			width: 176rpx;
			height: 64rpx;
			line-height: 64rpx;
			text-align: center;
			border-radius: 32rpx;
			font-size: 28rpx;
			margin-left: 32rpx;
		}
		.btn1{
			background: #FFFFFF;
			border: 1rpx solid #ABAFB7;
			color: #585F70;
		}
		.btn2{
			background: #FFFFFF;
			border: 1rpx solid #01CBFF;
			color: #01CBFF;
		}
	}
	
</style>
